<template>
    <el-tabs
      v-model="activeName"
      type="card"
      class="demo-tabs"
      @tab-click="handleClick"
    >
      <el-tab-pane label="高血压" name="first">
        <div class="demo-date-picker">
        <!-- 搜索表单 -->
        <el-form label-width="auto" style="max-width: 100%">
            <el-row>
                <el-col :span="5">
            <el-form-item label=" 姓名:">
                <el-input
                  v-model="queryDto.name"
                  placeholder="姓名"
                ></el-input>
            </el-form-item>
            </el-col>
            <el-col :span="8">
            <el-form-item label="身份证号:" style="margin-left: 20px;margin-right: 20px">
                    <el-input
                  v-model="queryDto.idNumber"
                  placeholder="身份证号"
                    ></el-input>
                </el-form-item>
                </el-col>
                <el-col :span="10">
            <el-form-item label="建档时间:">
      <el-date-picker
        v-model="createTimes"
        type="daterange"
        unlink-panels
        range-separator="To"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
        :shortcuts="shortcuts"
        :size="size"
        format="YYYY-MM-DD"
        value-format="YYYY-MM-DD"
      />
            </el-form-item>
                </el-col>
            </el-row>
            
    <el-row style="display:flex">
        <el-button type="primary" size="small" @click="searchSysRole">
            搜索
        </el-button>
        <el-button size="small" @click="resetData">重置</el-button>
    </el-row>
  </el-form>
        <!-- 添加按钮 -->
        <div class="tools-div">
            <el-button type="success" size="small" @click="addShow()">添 加</el-button>
        </div>
        <el-dialog v-model="dialogVisible" :title="tit" width="70%">
        <el-form label-width="120px">
            <el-row :gutter="40">
                <el-col :span="6">
            <el-form-item label="姓名:">
                <el-input v-model="patient.name"/>
            </el-form-item>
        </el-col>
        <el-col :span="6">
            <el-form-item label="身份证号:">
                <el-input  v-model="patient.idNumber"/>
            </el-form-item>
        </el-col>
            <el-col :span="6">
            <el-form-item label="联系方式:">
                <el-input v-model="patient.phone"/>
            </el-form-item>
        </el-col>
            <el-col :span="6">
                <el-form-item label="性别:">
                <el-radio-group v-model="patient.sex">
                    <el-radio :label="1">男</el-radio>
                    <el-radio :label="2">女</el-radio>
                </el-radio-group>
            </el-form-item>
        </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="6">
                <el-form-item label="年龄:">
                    <el-input v-model="patient.age"/>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="民族:">
                    <el-input v-model="patient.nationId"/>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="婚姻状况:">
                    <el-input  v-model="patient.maritalId"/>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="文化程度:">
                    <el-input  v-model="patient.standardId"/>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="6">
                <el-form-item label="职业:">
                    <el-input  v-model="patient.occupationId"/>
                </el-form-item>
            </el-col>
            <el-col :span="6"><div class="grid-content ep-bg-purple" /></el-col>
            <el-col :span="6"><div class="grid-content ep-bg-purple" /></el-col>
            <el-col :span="6"><div class="grid-content ep-bg-purple" /></el-col>
        </el-row>
        <el-form-item label="家庭地址:">
                <el-input v-model="patient.address"/>
            </el-form-item>
            <el-form-item label="标签:">
                <el-input  v-model="patient.tag"/>
            </el-form-item>
            <el-form-item label="头像">
                <el-upload
                            class="avatar-uploader"
                            action="http://localhost:8501/sys/patient/fileUpload"
                            :show-file-list="show"
                            :on-success="handleAvatarSuccess"
                            :headers="headers"
                    >
                    <img v-if="patient.img" :src="patient.img" class="avatar" />
                    <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
                </el-upload>
            </el-form-item>
            <el-form-item label="医师:">
                <el-input  v-model="patient.physician"/>
            </el-form-item>
            <el-form-item label="健康管理师:">
                <el-input  v-model="patient.thmanager"/>
            </el-form-item>
            <el-form-item label="档案来源:">
                <el-input  v-model="patient.archivalSource"/>
            </el-form-item>
            <el-form-item label="风险等级:">
                <el-input  v-model="patient.risk"/>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="addpatient()">提交</el-button>
                <el-button @click="dialogVisible = false">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog> 
        
        <!--- 角色表格数据 -->
        <el-table :data="list" style="width: 100%">
            <el-table-column prop="id" label="序号" width="60" />
            <el-table-column prop="name" label="姓名" width="60" />
            
            <el-table-column prop="sex" label="性别"  width="60"  #default="scope">
                {{ scope.row.sex == 1 ? '男' : '女' }}
            </el-table-column>
            
            <el-table-column prop="phone" label="联系方式"/>
            <el-table-column prop="address" label="家庭地址" />
            <el-table-column prop="idnumber" label="身份证号" />
            <el-table-column prop="img" label="头像"  #default="scope">
                <img :src="scope.row.img" width="100" />
            </el-table-column>
            <el-table-column prop="tag" label="标签" width="80"  />
            <el-table-column prop="physician" label="医师" width="60"  />
            <el-table-column prop="thmanager" label="健康管理师"  width="80" />
            <el-table-column prop="dateTime" label="建档日期" />
            <el-table-column prop="url" label="管理等级"  #default="scope">
                <img :src="scope.row.url" width="100" />
            </el-table-column>
            <el-table-column prop="archivalSource" label="档案来源" width="150"/>
            <el-table-column label="操作" align="center" width="280" #default="scope">
            <el-button type="primary" size="small" @click="addShow(scope.row)">
                修改
            </el-button>
            <el-button type="danger" size="small" @click="deleteById(scope.row)">
                删除
            </el-button>
            </el-table-column>
        </el-table>
  
     <!--分页条-->
  <el-pagination
               v-model:current-page="pageParams.page"
               v-model:page-size="pageParams.limit"
               :page-sizes="[2,5,10, 20, 50, 100]"
               @size-change="fetchData"
               @current-change="fetchData"
               layout="total, sizes, prev, pager, next"
               :total="total"
  />
  </div>
      </el-tab-pane>
      <el-tab-pane label="糖尿病" name="second">
          <div class="demo-date-picker">
        <!-- 搜索表单 -->
        <el-form label-width="auto" style="max-width: 100%">
            <el-row>
                <el-col :span="5">
            <el-form-item label=" 姓名:">
                <el-input
                  v-model="queryDto.name"
                  placeholder="姓名"
                ></el-input>
            </el-form-item>
            </el-col>
            <el-col :span="8">
            <el-form-item label="身份证号:" style="margin-left: 20px;margin-right: 20px">
                    <el-input
                  v-model="queryDto.idNumber"
                  placeholder="身份证号"
                    ></el-input>
                </el-form-item>
                </el-col>
                <el-col :span="10">
            <el-form-item label="建档时间:">
      <el-date-picker
        v-model="createTimes"
        type="daterange"
        unlink-panels
        range-separator="To"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
        :shortcuts="shortcuts"
        :size="size"
        format="YYYY-MM-DD"
        value-format="YYYY-MM-DD"
      />
            </el-form-item>
                </el-col>
            </el-row>
            
    <el-row style="display:flex">
        <el-button type="primary" size="small" @click="searchSysRole">
            搜索
        </el-button>
        <el-button size="small" @click="resetData">重置</el-button>
    </el-row>
  </el-form>
        <!-- 添加按钮 -->
        <div class="tools-div">
            <el-button type="success" size="small" @click="addShow()">添 加</el-button>
        </div>
        <el-dialog v-model="dialogVisible" :title="tit" width="70%">
        <el-form label-width="120px">
            <el-row :gutter="40">
                <el-col :span="6">
            <el-form-item label="姓名:">
                <el-input v-model="patient.name"/>
            </el-form-item>
        </el-col>
        <el-col :span="6">
            <el-form-item label="身份证号:">
                <el-input  v-model="patient.idNumber"/>
            </el-form-item>
        </el-col>
            <el-col :span="6">
            <el-form-item label="联系方式:">
                <el-input v-model="patient.phone"/>
            </el-form-item>
        </el-col>
            <el-col :span="6">
                <el-form-item label="性别:">
                <el-radio-group v-model="patient.sex">
                    <el-radio :label="1">男</el-radio>
                    <el-radio :label="2">女</el-radio>
                </el-radio-group>
            </el-form-item>
        </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="6">
                <el-form-item label="年龄:">
                    <el-input v-model="patient.age"/>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="民族:">
                    <el-input v-model="patient.nationId"/>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="婚姻状况:">
                    <el-input  v-model="patient.maritalId"/>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="文化程度:">
                    <el-input  v-model="patient.standardId"/>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="6">
                <el-form-item label="职业:">
                    <el-input  v-model="patient.occupationId"/>
                </el-form-item>
            </el-col>
            <el-col :span="6"><div class="grid-content ep-bg-purple" /></el-col>
            <el-col :span="6"><div class="grid-content ep-bg-purple" /></el-col>
            <el-col :span="6"><div class="grid-content ep-bg-purple" /></el-col>
        </el-row>
        <el-form-item label="家庭地址:">
                <el-input v-model="patient.address"/>
            </el-form-item>
            <el-form-item label="标签:">
                <el-input  v-model="patient.tag"/>
            </el-form-item>
            <el-form-item label="头像">
                <el-upload
                            class="avatar-uploader"
                            action="http://localhost:8501/sys/patient/fileUpload"
                            :show-file-list="show"
                            :on-success="handleAvatarSuccess"
                            :headers="headers"
                    >
                    <img v-if="patient.img" :src="patient.img" class="avatar" />
                    <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
                </el-upload>
            </el-form-item>
            <el-form-item label="医师:">
                <el-input  v-model="patient.physician"/>
            </el-form-item>
            <el-form-item label="健康管理师:">
                <el-input  v-model="patient.thmanager"/>
            </el-form-item>
            <el-form-item label="档案来源:">
                <el-input  v-model="patient.archivalSource"/>
            </el-form-item>
            <el-form-item label="风险等级:">
                <el-input  v-model="patient.risk"/>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="addpatient()">提交</el-button>
                <el-button @click="dialogVisible = false">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog> 
        
        <!--- 角色表格数据 -->
        <el-table :data="list" style="width: 100%">
            <el-table-column prop="id" label="序号" width="60" />
            <el-table-column prop="name" label="姓名" width="60" />
            
            <el-table-column prop="sex" label="性别"  width="60"  #default="scope">
                {{ scope.row.sex == 1 ? '男' : '女' }}
            </el-table-column>
            
            <el-table-column prop="phone" label="联系方式"/>
            <el-table-column prop="address" label="家庭地址" />
            <el-table-column prop="idnumber" label="身份证号" />
            <el-table-column prop="img" label="头像"  #default="scope">
                <img :src="scope.row.img" width="100" />
            </el-table-column>
            <el-table-column prop="tag" label="标签" width="80"  />
            <el-table-column prop="physician" label="医师" width="60"  />
            <el-table-column prop="thmanager" label="健康管理师"  width="80" />
            <el-table-column prop="dateTime" label="建档日期" />
            <el-table-column prop="url" label="管理等级"  #default="scope">
                <img :src="scope.row.url" width="100" />
            </el-table-column>
            <el-table-column prop="archivalSource" label="档案来源" width="150"/>
            <el-table-column label="操作" align="center" width="280" #default="scope">
            <el-button type="primary" size="small" @click="addShow(scope.row)">
                修改
            </el-button>
            <el-button type="danger" size="small" @click="deleteById(scope.row)">
                删除
            </el-button>
            </el-table-column>
        </el-table>
  
     <!--分页条-->
  <el-pagination
               v-model:current-page="pageParams.page"
               v-model:page-size="pageParams.limit"
               :page-sizes="[2,5,10, 20, 50, 100]"
               @size-change="fetchData"
               @current-change="fetchData"
               layout="total, sizes, prev, pager, next"
               :total="total"
  />
  </div>
      </el-tab-pane>
      <el-tab-pane label="心冠病" name="third">
          <div class="demo-date-picker">
        <!-- 搜索表单 -->
        <el-form label-width="auto" style="max-width: 100%">
            <el-row>
                <el-col :span="5">
            <el-form-item label=" 姓名:">
                <el-input
                  v-model="queryDto.name"
                  placeholder="姓名"
                ></el-input>
            </el-form-item>
            </el-col>
            <el-col :span="8">
            <el-form-item label="身份证号:" style="margin-left: 20px;margin-right: 20px">
                    <el-input
                  v-model="queryDto.idNumber"
                  placeholder="身份证号"
                    ></el-input>
                </el-form-item>
                </el-col>
                <el-col :span="10">
            <el-form-item label="建档时间:">
      <el-date-picker
        v-model="createTimes"
        type="daterange"
        unlink-panels
        range-separator="To"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
        :shortcuts="shortcuts"
        :size="size"
        format="YYYY-MM-DD"
        value-format="YYYY-MM-DD"
      />
            </el-form-item>
                </el-col>
            </el-row>
            
    <el-row style="display:flex">
        <el-button type="primary" size="small" @click="searchSysRole">
            搜索
        </el-button>
        <el-button size="small" @click="resetData">重置</el-button>
    </el-row>
  </el-form>
        <!-- 添加按钮 -->
        <div class="tools-div">
            <el-button type="success" size="small" @click="addShow()">添 加</el-button>
        </div>
        <el-dialog v-model="dialogVisible" :title="tit" width="70%">
        <el-form label-width="120px">
            <el-row :gutter="40">
                <el-col :span="6">
            <el-form-item label="姓名:">
                <el-input v-model="patient.name"/>
            </el-form-item>
        </el-col>
        <el-col :span="6">
            <el-form-item label="身份证号:">
                <el-input  v-model="patient.idNumber"/>
            </el-form-item>
        </el-col>
            <el-col :span="6">
            <el-form-item label="联系方式:">
                <el-input v-model="patient.phone"/>
            </el-form-item>
        </el-col>
            <el-col :span="6">
                <el-form-item label="性别:">
                <el-radio-group v-model="patient.sex">
                    <el-radio :label="1">男</el-radio>
                    <el-radio :label="2">女</el-radio>
                </el-radio-group>
            </el-form-item>
        </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="6">
                <el-form-item label="年龄:">
                    <el-input v-model="patient.age"/>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="民族:">
                    <el-input v-model="patient.nationId"/>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="婚姻状况:">
                    <el-input  v-model="patient.maritalId"/>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="文化程度:">
                    <el-input  v-model="patient.standardId"/>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="6">
                <el-form-item label="职业:">
                    <el-input  v-model="patient.occupationId"/>
                </el-form-item>
            </el-col>
            <el-col :span="6"><div class="grid-content ep-bg-purple" /></el-col>
            <el-col :span="6"><div class="grid-content ep-bg-purple" /></el-col>
            <el-col :span="6"><div class="grid-content ep-bg-purple" /></el-col>
        </el-row>
        <el-form-item label="家庭地址:">
                <el-input v-model="patient.address"/>
            </el-form-item>
            <el-form-item label="标签:">
                <el-input  v-model="patient.tag"/>
            </el-form-item>
            <el-form-item label="头像">
                <el-upload
                            class="avatar-uploader"
                            action="http://localhost:8501/sys/patient/fileUpload"
                            :show-file-list="show"
                            :on-success="handleAvatarSuccess"
                            :headers="headers"
                    >
                    <img v-if="patient.img" :src="patient.img" class="avatar" />
                    <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
                </el-upload>
            </el-form-item>
            <el-form-item label="医师:">
                <el-input  v-model="patient.physician"/>
            </el-form-item>
            <el-form-item label="健康管理师:">
                <el-input  v-model="patient.thmanager"/>
            </el-form-item>
            <el-form-item label="档案来源:">
                <el-input  v-model="patient.archivalSource"/>
            </el-form-item>
            <el-form-item label="风险等级:">
                <el-input  v-model="patient.risk"/>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="addpatient()">提交</el-button>
                <el-button @click="dialogVisible = false">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog> 
        
        <!--- 角色表格数据 -->
        <el-table :data="list" style="width: 100%">
            <el-table-column prop="id" label="序号" width="60" />
            <el-table-column prop="name" label="姓名" width="60" />
            
            <el-table-column prop="sex" label="性别"  width="60"  #default="scope">
                {{ scope.row.sex == 1 ? '男' : '女' }}
            </el-table-column>
            
            <el-table-column prop="phone" label="联系方式"/>
            <el-table-column prop="address" label="家庭地址" />
            <el-table-column prop="idnumber" label="身份证号" />
            <el-table-column prop="img" label="头像"  #default="scope">
                <img :src="scope.row.img" width="100" />
            </el-table-column>
            <el-table-column prop="tag" label="标签" width="80"  />
            <el-table-column prop="physician" label="医师" width="60"  />
            <el-table-column prop="thmanager" label="健康管理师"  width="80" />
            <el-table-column prop="dateTime" label="建档日期" />
            <el-table-column prop="url" label="管理等级"  #default="scope">
                <img :src="scope.row.url" width="100" />
            </el-table-column>
            <el-table-column prop="archivalSource" label="档案来源" width="150"/>
            <el-table-column label="操作" align="center" width="280" #default="scope">
            <el-button type="primary" size="small" @click="addShow(scope.row)">
                修改
            </el-button>
            <el-button type="danger" size="small" @click="deleteById(scope.row)">
                删除
            </el-button>
            </el-table-column>
        </el-table>
  
     <!--分页条-->
  <el-pagination
               v-model:current-page="pageParams.page"
               v-model:page-size="pageParams.limit"
               :page-sizes="[2,5,10, 20, 50, 100]"
               @size-change="fetchData"
               @current-change="fetchData"
               layout="total, sizes, prev, pager, next"
               :total="total"
  />
  </div>
      </el-tab-pane>
    </el-tabs>
  </template>
  
  <script lang="ts" setup>
  import type { TabsPaneContext } from 'element-plus'
  import { ref,onMounted } from 'vue';
  import { useApp } from '@/pinia/modules/app'
  import { ElMessage, ElMessageBox } from 'element-plus'
  import {GetSysRoleListByPage6tang,add,update,deletes} from '@/api/zsg/patient';
  
  const activeName = ref('first')
  
  const handleClick = (tab: TabsPaneContext, event: Event) => {
    console.log(tab, event)
  }
  
  
  
  
  
  const headers = {
  token: useApp().authorization.token     // 从pinia中获取token，在进行文件上传的时候将token设置到请求头中
  }
  // 图像上传成功以后的事件处理函数
  const handleAvatarSuccess = (response,uploadFile) => {
    patient.value.img = response.data
  }
  
  // 分页条总记录数
  let total = ref(0)
  
  // 定义表格数据模型
  let list = ref([
  ])
  let tit=ref("")
  const dialogVisible=ref(false)
  const pageParamsForm={
    page:1,
    limit:2,
  }
  const pageParams = ref(pageParamsForm)     // 将pageParamsForm包装成支持响应式的对象
  // 搜索表单数据
  const queryDto = ref({
    name: "" ,
    idNumber:"",
  })
  // 页面加载完毕以后请求后端接口获取数据
  onMounted(() => {
    fetchData() ;
  })
  // 搜索按钮点击事件处理函数
  const searchSysRole = () => {
    //queryDto.value.roleName = ""
    fetchData() ;
  }
  // 远程调用后端分页查询接口
  const fetchData = async () => {
    const {data , code , message } = await GetSysRoleListByPage6tang(pageParams.value.page , pageParams.value.limit , queryDto.value) ;
    console.log(data)
    list.value = data.list ;
    total.value = data.total
    // for(let a=0;a<=data.list.length;a++){
    //     if(data.list[a].sex=='1'){
    //         list.value[a].sex='男'
    //     }else{
    //         list.value[a].sex='女'
    //     }
        
    // }
  }
  const resetData=()=>{
    queryDto.value={}
  }
  // 定义提交表单数据模型
  const defaultForm = {
    id:"",
    name: "" ,
    sex:"",
    phone: "" ,
    address:"",
    idNumber:"",
    tag:"",
    physician:"",
    thmanager:"",
    archivalSource:"",
    occupationId:"",
    maritalId:"",
    risk:"",
    img:"",
    url:"",
  }
  const patient = ref(defaultForm)
  const addShow=(row)=>{
    if(row!=""){
        tit.value="修改个人信息"
        dialogVisible.value = true
        patient.value ={...row}
    }
    tit.value="添加个人信息"
    dialogVisible.value=true;
  
  }
  const addpatient=async()=>{
    console.log(patient.value.id)
    if(patient.value.id==null||patient.value.id==''){
    const {code , message , data} = await add(patient.value)
    if(code === 200) {
        dialogVisible.value = false
        ElMessage.success('操作成功')
        fetchData()
    }else {
        ElMessage.error(message)
    }
  }else{
    console.log(patient.value.img)
    const {code , message , data} =  await update(patient.value)
    if(code === 200) {
        dialogVisible.value = false
        ElMessage.success('操作成功')
        fetchData()
    }else {
        ElMessage.error(message)
    }
  }
  }
  const deleteById = (row) => {
    ElMessageBox.confirm('此操作将永久删除该记录, 是否继续?', 'Warning', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
    }).then(async () => {
       const {code } = await deletes(row)
       if(code === 200) {
            ElMessage.success('删除成功')
            fetchData()
       }
    })
  }
  </script>
  
  <style>
  .demo-tabs > .el-tabs__content {
    padding: 32px;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
  }
  </style>
  